<template>
  <div class="container">
    <div class="left">
      <p >库区选择</p>
      <el-select placeholder="请选择" @change="currentwarehousechange"  v-model="search.warehouseId" >
        <el-option v-for="item,index in warehouselist" :key="index" :value="item.id" :label="item.name" /></el-select>
      <div class="left-down">
        <el-input placeholder="请输入库区的名称" v-model="currentareaName" id="input"  ref='input' suffix-icon="el-icon-search"/>
        <!-- <input placeholder="请输入库区的名称" v-model="currentareaName" @input="debounceFn()()" > -->
        <!--  @input="currentareaNamechange" -->
        <div class="itembox" ref="items">
          <template v-for="item in arealist">
            <!-- !currentareaName||currentareaName===item.name.forEach(i=>i===currentareaName) -->
          <div v-if="vagueSearch(item.name)"  :key="item.areaId" class="item" @click="handleArea($event,item.id)">{{item.name}}</div>
          </template>
          <div v-if="!arealist.length" style="width:100%;height:200px;text-align:center;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;">
          <p>暂无库位</p>
          <el-button @click="$router.push('/layout/kwgl/kwgl-add')">新增库位</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">
        <p>库区总览</p>
        <span>库存总计:<span>{{total.total}}</span></span>
        <span> <div class="divsquare" style="background:#c3c3c3"></div> 停用库位:<span>{{total.stop}}</span></span>
        <span> <div class="divsquare" style="background:#00be76"></div> 占用库位:<span>{{total.use}}</span></span>
        <span> <div class="divsquare" style="background:#b2dccc"></div> 空闲库位:<span>{{total.free}}</span></span>
      </div>
      <div class="content" v-if="locationlist.length">
        <el-tooltip class="item" v-for="item in locationlist" :key="item.code" :open-delay="200" :visible-arrow="false" effect="light"  placement="bottom">
        <div :class="{
          'item':true ,
          'tingche':item.status===0&&item.useStatus===0,
          'zhanyong':item.status===1&&item.useStatus===1,
          'kongxian':item.status===1&&item.useStatus===0
          }"></div>
          <template v-slot:content >
              <div class="title">库位编号:<span>{{item.code}}</span></div>
              <div class="title">库位名称:<span>{{item.areaName}}</span></div>
              <div class="title">库位位置:<span>{{`${item.locationRow||'-'}排${item.locationColumn||'-'}列${item.locationLayer||'-'}层`}}</span></div>
              <div class="title">库位状态:<span>{{(item.status===0&&item.useStatus===0)?'停用':((item.status===1&&item.useStatus===1)?'占用':'空闲')}}</span></div>
              <div class="title">货品名称:<span>{{item.goodsName}}</span></div>
              <div class="title">货品数量:<span>{{item.goodsTotal}}</span></div>
          </template>
        </el-tooltip>
      </div>
      <div v-else style="width:160px;height:160px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;text-align:center">
          <img style="width:160px;height:160px;" src="http://www-wms-java.itheima.net/img/empty.4300e933.png" alt="">
          <p>暂无库位</p>
          <el-button @click="$router.push('/layout/kwgl/kwgl-add')">新增库位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getwarehouselist, getarealist, overview, locationlistDetail } from '@/api/location-view'
import { debounce } from '@/utils/debounce'
export default {
  name: 'location-view',
  async created () {
    this.getwarehouselist()
  },
  data () {
    return {
      currentareaName: '', // 当前选中的仓库
      warehouselist: [], // 仓库列表
      arealist: [], // 库区列表
      total: {}, // 库区总览
      locationlist: [], // 库位详情
      search: { // 查询库区信息的params
        status: '1',
        warehouseId: ''
      }
    }
  },
  methods: {
    async getwarehouselist () { // 获取仓库信息
      const { data: warehouselist } = await getwarehouselist()
      this.warehouselist = warehouselist
      // if (this.warehouselist.length) {
      this.search.warehouseId = warehouselist[0]?.id
      this.getarealist()
      // }
    },
    async getarealist () { // 获取库区信息
      const { data: arealist } = await getarealist(this.search)
      this.arealist = arealist
    },
    currentwarehousechange () { // 下拉菜单中的 选项改变时重新获取库区数据
      this.currentareaName = ''
      this.getarealist()
    },
    async handleArea (e, id) { // 点击库区时1进行排他处理isactive2并根据id发送请求,获取数据,渲染右边页面
      // console.log(id)
      // console.log(e)
      this.$refs.items.childNodes.forEach(i => { // 删除所有样式
        i.classList?.remove('isActive')
      })
      e.target.classList.add('isActive')// 给选中的添加样式
      e.target.click()// 并且点击,发送请求
      console.log('添加了样式并模拟点击====>')
      const { data } = await overview(id)// 获取视图数据
      // console.log(data)
      this.total = data
      const { data: locationlist } = await locationlistDetail(id) // 获取每个库的详情
      console.log(locationlist)
      this.locationlist = locationlist
    },
    currentareaNamechange () { // 搜索框的内容发生改变时触发
      console.log(1)
      this.$nextTick(() => {
        try {
          // console.log(this.$refs.items.childNodes)
          if (this.currentareaName !== '') {
            console.log(this.$refs.items.childNodes)
            this.$refs.items.childNodes.forEach(i => {
              if (i.className && this.currentareaName !== '') {
                i.click()
                console.log('模拟点击了哦')
              }
            })
          }
          if (this.currentareaName === '') {
            this.clickfirstchildNode()
          }
        } catch (e) {
          console.log(e)
        }
      })
      console.log('防抖执行完了')
    },
    clickfirstchildNode () {
      // console.log(this.$refs.items.childNodes)
      // this.$refs.items.childNodes.item(0).classList.add('isActive')
      this.$refs.items.childNodes.item(0)?.click()
    },
    vagueSearch (name) {
      if (!this.currentareaName) {
        return true
      } else {
        return (name.includes(this.currentareaName))
      }
    }
    // debounceFn (fn, t) {
    //   let timer = null
    //   console.log('外层', timer)
    //   return function () {
    //     console.log('里层', timer)
    //     clearTimeout(timer)
    //     timer = setTimeout(function () {
    //       fn()
    //     }, t)
    //   }
    // }
  },
  mounted () {
    document.querySelector('#input').addEventListener('input', debounce(this.currentareaNamechange, 1500))
    // this.$refs.input.$refs.addEventListener('input', this.debounceFn())
  },
  watch: {
    arealist (val) {
      // this.clickfirstchildNode(val)
      // console.log(val)
      if (val.length) {
        this.$nextTick(() => {
          this.clickfirstchildNode()
        })
      }
    },
    'currentareaName' (val) {
      // try {
      //   this.$refs.items.childNodes.forEach(i => {
      //     if (i.classList.length >= 2) {
      //       i.click()
      //       console.log('模拟点击了哦')
      //     }
      //   })
      // } catch (e) {
      //   console.log()
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
 min-width: 100%;
 height: 100%;
//  box-shadow: 3px 3px  10px gray;
 border-radius: 10px;
//  background-color: skyblue;
 display: flex;
 justify-content:space-between;
//  background-color: #fff;
.left{
  width: 23%;
  height: 100%;
  padding: 27px 19px 27px 20px;
  box-shadow: 3px 3px  10px gray;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  >p{//顶部 库区选择 title
    font-size: 16px;
    margin: 0 0 22px 10px;
  }
  >.el-select{
    width:100%;
    margin-bottom:21px;
  }
  >.left-down{
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 0;
    padding:30px 29px 0px 26px;
          overflow: hidden;
    // display: flex;
    // flex-direction: column;
    // background-color: green;
    // overflow: hidden;
    >.el-input{
      width: 100%;
      margin-bottom: 20px;
    }
    >.itembox:hover{
      // background-color: pink;
      &::-webkit-scrollbar{
          width:6px;
        }
      &::-webkit-scrollbar-thumb{
         background: rgba(109, 93, 41, 0.5);
         border-radius: 10px;
      }
    }
    >.itembox{
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      height: 82.5%;
      overflow-y: auto;

      width: 75%;
      padding-bottom: 10px;
      // background-color: rgb(89, 65, 197);
      &::-webkit-scrollbar{
        width: 6px;
        background-color:#f5f0f0;
      }
      &::-webkit-scrollbar-thumb{background-color:#f5f0f0;}
      .item{
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
        margin-top:20px;
        font-size: 13px;
        color: #332929;
        text-align: center;
        line-height: 40px;
        width: 80%;
        background-color: #fff;
        height: 40px;
      }
      .isActive{
        background-color: #ffb200;
      }
      .item:hover{
        background-color: #ffb200;
      }
    }
  }
}
.right{
  position: relative;
  width: 76%;
  height: 100%;
  padding: 27px 19px 27px 20px;
  box-shadow: 3px 3px  10px gray;
  background-color: #fff;
  border-radius: 10px;
  >div.title{
    display: flex;
    height: 22px;
    margin-bottom: 21px;
    >p{
      font-size: 16px;
      color: #332929;
      margin-right:103px;
      line-height: 22px;
    }
    >span{
      display: flex;
      font-size: 14px;
      color: #424250;
      line-height: 22px;
      margin-right: 40px;
      >span{
        font-size: 14px;
        margin-left:20px;
        line-height: 22px;
        }
      >.divsquare{
        margin-top:5px;
        margin-right: 10px;
        width:12px ;
        height: 12px;
        border-radius: 3px;
      }
    }
    }
  >div.content{
    // position: relative;
    display: flex;
    flex-wrap: wrap;
      .tingche{
        background-color:#c3c3c3;
      }
      .tingche:hover{
        border: 2px solid #00be76;
      }
      .zhanyong{
        background-color:#00be76;
      }
       .zhanyong:hover{
        // border: 2px solid #f02905;
        border: 2px solid #008a56;
      }
      .kongxian{
        background-color:#b2dccc;
      }
      .kongxian:hover{
        border: 2px solid #00be76;
      }
    >.item{
      margin: 0 12px 10px 0;
      width: 36px;
      height: 36px;
      // background-color:#008e76;
      border-radius:5px;
    }
  }
}
}
  .el-button:hover{
    background-color: #007a4c;
  }
  .el-button{
  color: #fff;
  border-radius: 20px;
  background-color: #00be76;
  }
  .el-tooltip__popper.is-light {

    .title{
       color: #B5ABAB;
       font-size: 12px;
        // margin-bottom: 12px;
       >span{
        margin-left: 15px;
        color: #332929;
       }
     }
  }

</style>
